<template>
	<view>
		<u-navbar :is-back="true" back-icon-color="#333" :background="background" back-text="商品信息" title-color="#333"
			:back-text-style="{ color: '#333' }">
			<view class="navbar-right" slot="right">
				<view class="dot-box right-item">
					<text @tap="onNavigationBar" v-show="$rule('shangpin/xinxi/fabu')">发布</text>
				</view>
			</view>
		</u-navbar>


		<view>
			<view>
				<u-popup v-model="showCar" mode="bottom" @close="closeCar" @open="openCar" closeable>
					<view class="sort-info2">
						<view class="info-item">
							<view class="info-image">
								<image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="aspectFill"
									style="width: 150rpx;height: 150rpx;"></image>
							</view>
							<view class="info-data">
								<view class="info-title">
									<text>商品名称</text>
								</view>
								<view class="info-specifications">
									<view>
										货号：GTD456774
									</view>
									<view>
										库存：100
									</view>
								</view>
								<view class="info-number">
									<view>
										规格：80*30*0.12
									</view>
									<view>
										单位/对
									</view>
									<view>
										库存120
									</view>
								</view>
								<view class="addOrMinus">
									<u-number-box v-model="value2" min="1" :showMinus="true">
										<view slot="minus" class="minus">
											<u-icon name="minus" size="12"></u-icon>
										</view>
										<text slot="input" style="width: 50px;text-align: center;"
											class="input">{{value2}}</text>
										<view slot="plus" class="plus">
											<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
										</view>
									</u-number-box>
								</view>
							</view>

						</view>
					</view>
					<view class="dsb" style="padding: 0 30rpx;margin-bottom: 20px;">
						<view class="">
							总计：2件
						</view>
						<view class="">
							<u-button style="min-width: 50rpx;" type="primary">确认</u-button>
						</view>
					</view>
					<!-- <view class="bottion-btn">
						<u-button type="primary" text="生成选配单"></u-button>
					</view> -->
				</u-popup>
			</view>
			<view class="search-contaienr">
				<u-search placeholder="搜索商品" @change="InputFocus" :showAction="false" bgColor="#fff" v-model="searchWord"></u-search>
			</view>
			<view class="goods-sort">
				<!-- 点击分类切换商品 -->

				<view class="sort-title">
					<view :class="{'sort-item':true, 'active': currentIndex === item.id}" v-for="item in sortlist"
						:key="item.id" @tap="switchSort(item.id)">
						{{ item.name }}
					</view>
				</view>
				<view class="sort-info">
					<view class="info-item" v-for="goods in goodsDetail" :key="goods.id" @click="gourl(`../goodsDetail/goodsDetail?pid=${goods.id}`)">
						<view class="info-image">
							<image :src="goods.image" mode="aspectFill"
								style="width: 150rpx;height: 150rpx;"></image>
						</view>
						<view class="info-data">
							<view class="info-title">
								<text>{{goods.name}}</text>
							</view>
							<view class="info-specifications">
								<view>
									货号：{{ goods.sku }}
								</view>
								<view>
									单位/{{ goods.unit }}
								</view>
							</view>
							<view class="info-number">
								<view>
									规格：{{ goods.specification }}
								</view>
								<view>
									
								</view>
								<view>
									库存{{ goods.inventory }}
								</view>
							</view>
							<!-- <view class="addOrMinus">
								<u-number-box v-model="value" min="0" :showMinus="showMinus">
									<view slot="minus" class="minus">
										<u-icon name="minus" size="12"></u-icon>
									</view>
									<text slot="input" style="width: 50px;text-align: center;"
										class="input">{{value}}</text>
									<view slot="plus" class="plus">
										<u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
									</view>
								</u-number-box>
							</view> -->

						</view>
					</view>
				</view>


			</view>
		</view>
		<!-- <view class="bottom-contaienr">
			<view class="bottom-content">
				<view class="bottom-iconCar">
					<u-icon name="shopping-cart" size="38" @tap="showCar = true"></u-icon>
				</view>
				<view class="bottion-btn">
					<u-button type="primary">生成选配单</u-button>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				searchWord:'',
				firstId:null,
				detailForm: {
					page: 1,
					limit: 1000,
					product_type_id: null,
					name: '',
				},
				login: false,
				searchList:[],
				goodsDetail: [],
				sortlist: [],
				userInfo: {},
				showCar: false,
				value: 0,
				value2: 1,
				currentIndex: null // 当前选中的菜单索引
			};
		},
		onLoad() {
			_this = this;
			_this.getlist();
			let userinfo = uni.getStorageSync('userinfo');
			if (userinfo) {
				_this.login = true;
			}
			_this.getUserDetail()
		},
		computed: {
			showMinus() {
				return this.value >= 1;
			}
		},
		onNavigationBarButtonTap(e) {
		uni.navigateTo({
			url: 'addcommodity'
		})
	},
		methods: {
			onNavigationBar() {
			uni.navigateTo({
				url: '/pages/commodity/addcommodity'
			})
		},
			InputFocus(e) {
				
				clearTimeout(_this.timer);
				// 清除之前的定时器
				// 创建一个新的定时器
				_this.timer = setTimeout(() => {
					console.log('e: ', e)
					_this.getSearchList(e)
				}, 500); // 设置防抖延迟时间为500毫秒
			},
			getSearchList(searchValue) {
				if (searchValue !== '') {
					// _this.detailForm.name = searchValue
					_this._post_form('/api/ykjp/product/product/newgetProduct', {
						page: 1,
						limit: 1000,
						name: searchValue,
					}, (result) => {
								
						// _this.setData({'sortlist' : result.data.data})
						_this.searchList = result.data.data
						
						// 将搜索的商品的类型显示激活
						_this.currentIndex = _this.searchList.product_type_id
						_this.goodsDetail = _this.searchList
						
						console.log('searchList: ', _this.searchList)
					
					});
						
				} else{
					_this.getlist()
				}
				
				
			},
			getlistDetail(pid) {

				_this.detailForm.product_type_id = pid
				_this._post_form('/api/ykjp/product/product/newgetProduct', _this.detailForm, (result) => {

					// _this.setData({'sortlist' : result.data.data})
					_this.goodsDetail = result.data.data
					console.log('goodsDetail: ', _this.goodsDetail)

				});
			},
			getlist() {
				_this._post_form('/api/ykjp/product/type/getType', {}, (result) => {

					// _this.setData({'sortlist' : result.data.data})
					_this.sortlist = result.data.data
					_this.firstId = _this.sortlist[0].id
					_this.currentIndex = _this.firstId
					console.log('sortlist: ', _this.sortlist)
					_this.getlistDetail(_this.firstId)
				});
			},
			getUserDetail() {
				var _this = this;
				_this._post_form('api/user/getUserDetail', {}, function(result) {
					_this.setData({
						userInfo: result.data
					})
				});
			},
			gourl(url) {
				if (this.login) {
					uni.navigateTo({
						url: url
					});
				} else {
					uni.navigateTo({
						url: 'login'
					});
				}
			},
			openCar() {

				// console.log('open');
			},
			closeCar() {
				this.showCar = false
				// console.log('close');
			},
			valChange(e) {
				console.log('当前值为: ' + e.value)
			},
			switchSort(index) {
				this.currentIndex = index;
				this.getlistDetail(index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sort-info2 {
		width: 100%;
		// display: flex;
		// flex-wrap: wrap;
		margin-top: 40rpx;
		// flex-direction: column;

		.info-item {
			display: flex;
			width: 100%;
			height: 200rpx;
			border-bottom: 1px solid #D8D8D8;
			padding-top: 20rpx;
			padding-left: 10rpx;
			margin-bottom: 5upx;
			background-color: #fff;
			
			.info-image {
				width: 150upx;
			}

			.info-data {
				padding: 10upx 20upx;
				width: 100%;

				.info-title {
					font-size: 26upx;
					font-weight: 700;
					color: #333;
				}

				.info-specifications {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22upx;
					color: #666;
					margin-top: 10upx;
				}

				.info-number {

					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22upx;
					color: #666;
					margin-top: 10upx;
				}
			}
		}
	}

	.sort-info {
		width: 100%;
		// display: flex;
		// flex-wrap: wrap;
		// justify-content: space-between;

		.info-item {
			display: flex;
			width: 100%;
			height: 232rpx;
			border-bottom: 1px solid #F4F5F7;
			padding-top: 20rpx;
			padding-left: 10rpx;
			margin-bottom: 5upx;
			background-color: #fff;

			.info-image {
				width: 150upx;
			}

			.info-data {
				padding: 10upx 20upx;
				width: 100%;

				.info-title {
					font-size: 26upx;
					font-weight: 700;
					color: #333;
				}

				.info-specifications {
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22upx;
					color: #666;
					margin-top: 10upx;
				}

				.info-number {

					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 22upx;
					color: #666;
					margin-top: 10upx;
				}
			}
		}
	}

	.addOrMinus {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 20rpx;
	}

	.bottom-contaienr {
		height: 60px;

		.bottom-content {
			width: 100%;
			height: 60px;
			background-color: #fff;
			display: flex;
			position: fixed;
			bottom: 0;
			left: 0;
			align-items: center;
			justify-content: space-around;
			box-shadow: 0px -2px 15px 0px rgba(0, 0, 0, 0.1);

			.bottom-iconCar {}

			.bottion-btn {
				background-color: #fff;
			}
		}
	}

	.minus {
		width: 22px;
		height: 22px;
		border-width: 1px;
		border-color: #E6E6E6;
		border-style: solid;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
		border-bottom-left-radius: 100px;
		border-bottom-right-radius: 100px;

		justify-content: center;
		align-items: center;
	}

	.input {
		padding: 0 10px;
	}

	.plus {
		width: 22px;
		height: 22px;
		background-color: #FF0000;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
	}

	.active {

		background: #fff;
	}

	.goods-sort {
		display: flex;

		.sort-title {
			display: flex;
			background-color: #F8F8F8;
			height: 100vh;
			flex-direction: column;

			.sort-item {
				height: 80upx;
				width: 150upx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26upx;
				color: #333;
			}
		}


	}

	.search-contaienr {
		padding: 20upx;
		background-color: #F4F5F7;
	}
</style>